<template>
    <div>
        <index-nav></index-nav>
        <a-row  class="contain">
            <a-col :xs="{span: 24}" :md="{span:22, offset: 1}" :lg="{span:18, offset: 3}" class="contain">
                <h2>在线考试练习</h2>
                <div>
                    <a-progress :percent="percent" :show-info="false" />
                </div>
                <a-spin :spinning="loadingQuestion">
                    <div width="100%"
                         :class="{'table': true, 'error-table': correctStatus === 2, 'success-table': correctStatus === 1}">
                        <div class="success-title">
                            <span v-html="questionDetail.content"></span>
                            <span class="question-type" v-if="typeName">（{{ typeName }}）</span>
                        </div>
                        <!--        单选、判断         -->
                        <a-radio-group
                                v-if="questionDetail.type === 1 || questionDetail.type === 2"
                                v-model="singleAnswerOptionId"
                                @change="correctStatus = 0"
                        >
                            <a-radio v-for="(option, index) in questionDetail.optionList"
                                     class="option"
                                     :style="radioStyle"
                                     :key="option.answerOptionId"
                                     :value="option.answerOptionId">
                                {{option.content}}
                            </a-radio>
                        </a-radio-group>
                        <!--        多选         -->
                        <a-checkbox-group v-if="questionDetail.type === 3"
                                          v-model="answerOptionIdList"
                                          @change="correctStatus = 0"
                        >
                            <div v-for="(option, index) in questionDetail.optionList"
                                 class="option"
                                 :key="option.answerOptionId">
                                <a-checkbox
                                        :value="option.answerOptionId"
                                        :style="radioStyle">
                                    {{option.content}}
                                </a-checkbox>
                            </div>
                        </a-checkbox-group>
                    </div>
                    <div style="margin-top: 10px">
                        <a-button @click="checkAnswerHandler()" :loading="loading" v-if="correctStatus === 0 || correctStatus === 2">
                            提交
                        </a-button>
                        <a-button
                                @click="nextQuestion()"
                                v-if="correctStatus === 1"
                                style="background-color: #52c41a;color: white">
                            下一题
                        </a-button>
                        <a-checkbox @change="onChangeAutoNext" style="float: right; height: 32px; line-height: 32px">
                            答对自动跳过
                        </a-checkbox>
                    </div>
                </a-spin>
            </a-col>
        </a-row>
    </div>
</template>

<script>
  import IndexNav from '@/views/components/IndexNav'
  import { oneRandomQuestion, checkAnswer } from '@/api/question';
  export default {
    name: "trainIndex",
    components: { IndexNav },
    data() {
      return {
        trainObject: 0,
        radioStyle: {
          display: 'block',
          height: '35px',
          lineHeight: '35px',
        },
        questionDetail: {
          questionId: 0,
          type: 0,
          content: '',
          optionList: [
            {
              answerOptionId: 0,
              content: '',
              sort: 0
            },
          ],
        },
        answerOptionIdList: [],
        singleAnswerOptionId: 0,
        buttonStatus: 0,
        loading: false,
        correctStatus: true,
        percent: 0,
        autoNext: false,
        loadingQuestion: false
      }
    },
    created() {
      this.trainObject = this.$route.params.trainObject ?? 0;
      this.getOneRandomQuestion();
    },
    methods: {
      getOneRandomQuestion() {
        this.loadingQuestion = true;
        return oneRandomQuestion(this.trainObject).then(res => {
          this.loadingQuestion = false;
          this.questionDetail = res.data
          console.log(res.data)
          return Promise.resolve();
        })
      },
      init() {
        this.answerOptionIdList = []
        this.singleAnswerOptionId = 0;
        this.correctStatus = 0;
        this.percent = 0;
      },
      onChangeAutoNext(e) {
        this.autoNext = e.target.checked;
      },
      nextQuestion() {
        this.getOneRandomQuestion().then(() => {
          this.init();
        });
      },
      checkAnswerHandler() {
        let waitPromise;
        this.loading = true;
        if(this.questionDetail.type === 1 || this.questionDetail.type === 2) {
          waitPromise = checkAnswer(this.questionDetail.questionId, [this.singleAnswerOptionId])
        } else {
          waitPromise = checkAnswer(this.questionDetail.questionId, this.answerOptionIdList)
        }
        waitPromise.then(res => {
          this.loading = false;
          // 答案正确
          if(res.data === true) {
            this.correctStatus = 1;
            // 跳下一题
            if(this.autoNext === true) {
              let timer = setInterval(() => {
                this.percent += 10;
                if(this.percent >= 100) {
                  clearInterval(timer);
                  this.getOneRandomQuestion().then(() => {
                    this.init();
                  });
                }
              }, 100);
            }
          } else if(res.data === false) {
            this.correctStatus = 2;
          }
          console.log(res)
        })
      }
    },
    computed: {
      typeName() {
        if(this.questionDetail.type === 1) {
          return '单选'
        } else if(this.questionDetail.type === 2) {
          return '判断'
        } else if(this.questionDetail.type === 3) {
          return '多选'
        }
      }
    }


  }
</script>

<style scoped>
.contain {
    padding: 0 10px;
}
table tr td:nth-child(2) {
    width: 100%;
}
.success-title {
    background-color: #dff0d8;
    padding: 8px;
    font-weight: bold;
}
.table {
    border: 2px solid #ddd;
}
.table .option {
    padding-left: 8px;
}
.table .option:nth-of-type(odd) {
    background-color: #f9f9f9
}
/deep/ .ant-checkbox-group:nth-child(n +1) {
    width: 100%;
}
/deep/ .ant-radio-group:nth-child(n +1) {
    width: 100%;
}
/deep/ .ant-radio-wrapper {
    margin-right: 0;
}
.error-table {
    border: 2px solid #ff4d4f;
}
.success-table {
    border: 2px solid #52c41a;
}
.question-type {
    color: #ff4d4f;
}
</style>
